<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>新大楼会议室预订系统登陆</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="登陆，会议室，预定，预定系统，同花顺">
      <meta name="description" content="同花顺新大楼会议室预订系统">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">	

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

      <style type="text/css">
      html,body{font-family: "微软雅黑";background:url("images/1.jpg") no-repeat center fixed;background-size:100% 100%;position:relative;height:100%;}
      .clear{clear:both;}
      .login_logo{width:60%;text-align: center;position:absolute;left:20%;top: 20%;}
      .login_logo img{margin: 0 auto;}
      .login_logo h1{color:#fff;font-weight: bolder;color:#ccc;font-size:18px;color: #1C474E;}
      .has-error .form-control {border-color: #E50015;}
      .login_input{margin-top:40px;}
      .login_input .input_logo{width:10%;float:left;background:#d9534f;border-radius: 6px;}
      .login_input .input_logo span{display:inline-block;height:19px;width:19px;margin:0 auto;margin-top: 8px;}
      .login_input .input_logo .input_logo_logo1{background:url("images/login1.png");}
      .login_input .input_logo .input_logo_logo2{background:url("images/login2.png");}
      .login_input .form-group{float:left;width:90%;margin-bottom:0;}
      .login_input .login_box{margin-top:20px;background:#d9534f;border-radius:6px;}
      .login_btn{margin-top:20px;}
      .login_btn p{text-align:right;margin-top:20px;}
      .login_btn p a{color:#035D6F;}

      /* 小型设备（平板电脑，768px 起） */
      @media (max-width: 768px) {
         .login_logo h1{
               font-size:1em;
         }
         .login_input .input_logo{width:20%;}
         .login_input .form-group{width:80%;}
       }

      /* 中型设备（台式电脑，992px 起） */
      @media (max-width: 992px) {

       }


      @media (min-width: 992px) {
         .login_input{width: 50%;margin: 40px auto;}
      }


      /* 大型设备（大台式电脑，1200px 起） */
      @media (max-width: 1200px) {

      }




      </style>
   </head>
   <body>
   <div class="login_logo">
      <img src="images/logo.png" class="img-responsive">
      <h1>同花顺新大楼会议室预订系统</h1>
      <div class="login_input">

         <div class="login_box">
         	<div class="input_logo">
         		<span class="input_logo_logo1"></span>
         	</div>
	         <div  class="form-group has-error">
	            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
	         </div>
	         <div class="clear"></div>
         </div>

         <div class="login_box">
         	<div class="input_logo">
         		<span class="input_logo_logo2"></span>
         	</div>
	        <div  class="form-group has-error">
	            <input type="password" class="form-control" id="password" placeholder="请输入密码">
	        </div>
	        <div class="clear"></div>
         </div>


         <div class="login_btn">
            <button type="button" class="btn btn-primary btn-lg btn-block btn-danger" id="login_btn">登陆</button>
            <p><a href="javascript:void(0)">忘记密码？</a></p>
         </div>
      </div>
   </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

      <script type="text/javascript">
      $("#login_btn").click(function(){
      	var username = $("#username").val();
      	var password = $("#password").val();
      	alert(username+"-----"+password);
      	$.ajax({
      		type:"post",
      		url:"",
      		data:{"username":username,"password":password},
      		success:function(data){
      			alert(data);
      		},
      		error:function(data){
      			alert(data);
      		}
      	})
      })
     </script>

   </body>
</html>